<template>
  <div>
    <Card>
      <Tabs name="all" @on-click="handleTabs" style="min-height: 400px;">
        <TabPane label="全部套餐" name="all">
          <package-search-form :status="0" @handle_search="getPackageList" @handle_add_package="openAddPackage"></package-search-form>
          <all-package :packageList="packageList" @package_push="packagePush" @package_lower="packageLower" @package_edit="packageEdit"
            @package_delete="packageDelete"></all-package>
        </TabPane>
        <TabPane label="未上架" name="unpush">
          <package-search-form @handle_search="getPackageList" :status="1" @handle_add_package="openAddPackage" @batch_push="batchPush"></package-search-form>
          <un-push-package :packageList="packageList" @on_select="onSelect" @on_select_all="onSelectAll" @on_select_cancel="onSelectCancel"
            @on_select_all_cancel="onSelectAllCancel" @package_push="packagePush" @package_lower="packageLower" @package_edit="packageEdit"
            @package_delete="packageDelete" :status="1"></un-push-package>
        </TabPane>
        <TabPane label="已上架" name="push">
          <package-search-form @handle_search="getPackageList" :status="2" @handle_add_package="openAddPackage" @batch_lower="batchLower"></package-search-form>
          <push-package :packageList="packageList" @on_select="onSelect" @on_select_all="onSelectAll" @on_select_cancel="onSelectCancel"
            @on_select_all_cancel="onSelectAllCancel" @package_push="packagePush" @package_lower="packageLower" @package_edit="packageEdit"
            @package_delete="packageDelete" :status="2"></push-package>
        </TabPane>
        <TabPane label="已下架" name="lower">
          <package-search-form @handle_search="getPackageList" :status="3" @handle_add_package="openAddPackage" @batch_push="batchPush"></package-search-form>
          <lower-package :packageList="packageList" @on_select="onSelect" @on_select_all="onSelectAll" @on_select_cancel="onSelectCancel"
            @on_select_all_cancel="onSelectAllCancel" @package_push="packagePush" @package_lower="packageLower" @package_edit="packageEdit"
            @package_delete="packageDelete" :status="3"></lower-package>
        </TabPane>
      </Tabs>
      <Page :total="total" show-total show-sizer @on-change="changePage" @on-page-size-change="changePageSize" :page-size="postData.pageSize"
        :page-index="postData.pageIndex" style="margin-top: 10px" />
    </Card>
    <Modal title="添加套餐" v-model="addPackageModal" @on-visible-change="onVisibleChange">
      <Form :label-width="100" :model="addData" :rules="addRules" ref="addPackage">
        <FormItem prop="firstCode" label="一级分类：" style="width: 250px;" :label-width="120" >
          <Select v-model="addData.firstCode" @on-change="firstChange" placeholder="请选择一级分类" clearable>
            <Option v-for="item in addData.firstList" :value="item.code" :key="item.code">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="secondCode" label="二级分类：" style="width: 250px;" :label-width="120" >
          <Select v-model="addData.secondCode" @on-change="secondChange" placeholder="请选择二级分类" clearable>
            <Option v-for="item in addData.secondList" :value="item.code" :key="item.code">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="thirdCode" label="三级分类：" style="width: 250px;" :label-width="120" >
          <Select v-model="addData.thirdCode" @on-change="thirdChange" placeholder="请选择三级分类" clearable>
            <Option v-for="item in addData.thirdList" :value="item.code" :key="item.code">{{item.name}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="name" label="套餐名称：" style="width: 300px;" :label-width="120" >
          <Input v-model="addData.name" placeholder="请输入套餐名称" />
        </FormItem>
        <FormItem prop="coursePackageDesc" label="套餐描述：" style="width: 300px;" :label-width="120" >
          <Input v-model="addData.coursePackageDesc" type="textarea" :rows="3"  placeholder="请输入套餐描述，不超过200字" />
        </FormItem>
        <FormItem label="套餐类型：" style="width: 300px;" required>
          <RadioGroup v-model="addData.platformType" @on-change="onTypeChange">
            <Radio :label="2">直播课时套餐</Radio>
            <Radio :label="3">录播课</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="直播授课比例：" style="width: 300px;" :label-width="120" :required="IsAllPrice" >
          <Select v-model="addData.oneToX" placeholder="请选择授课比例" clearable :disabled="!IsAllPrice">
            <Option v-for="item in addData.oneToXArr" :key="item" :value="parseInt(item)">{{item}}</Option>
          </Select>
        </FormItem>
        <Row>
          <Col :span="10">
            <FormItem label="直播授课周数：" style="width: 300px;" :label-width="120" :required="IsAllPrice" >
              <InputNumber v-model="addData.weekCount" :min="1" placeholder="请输入周数" :disabled="!IsAllPrice" />
            </FormItem>
          </Col>
          <Col :span="10">
            <FormItem label="每周课时数：" style="width: 300px;" :required="IsAllPrice" >
              <InputNumber v-model="addData.weekClassHour" :min="1" placeholder="请输入每周课时数" :disabled="!IsAllPrice" />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="直播课时单价：" style="width: 300px;" :label-width="120" :required="IsAllPrice" >
          <InputNumber v-model="addData.unitPrice" :min="1" placeholder="请输入课时单价" :disabled="!IsAllPrice" />元
        </FormItem>
        <FormItem label="套餐总价：" style="width: 300px;" :label-width="120" :required="!IsAllPrice" >
          <InputNumber v-model="addData.allPrice" :min="1" placeholder="请输入套餐总价":disabled="IsAllPrice"/>元
        </FormItem>
        <FormItem :prop="isDiscount" label="是否优惠:" style="width: 300px;"  >
          <RadioGroup v-model="addData.isDiscount" @on-change="onRadioChange" >
            <Radio :label="1">有优惠</Radio>
            <Radio :label="0">无优惠</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="课时单价优惠金额：" style="width: 300px;" :label-width="120" :required="!(!discountUnitPriceRequire || !IsAllPrice)">
          <InputNumber v-model="addData.discountUnitPrice" :min="0" placeholder="请输入课时单价优惠金额"
                       :disabled="!discountUnitPriceRequire || !IsAllPrice" />元
        </FormItem>
        <FormItem label="套餐总价优惠金额：" style="width: 300px;" :label-width="120" :required="!(!discountUnitPriceRequire || IsAllPrice)">
          <InputNumber v-model="addData.discountAllPrice" :min="0" placeholder="请输入套餐总价优惠金额"
                       :disabled="!discountUnitPriceRequire || IsAllPrice" />元
        </FormItem>
        <FormItem prop="file" label="上传图片：" :label-width="120" :required="fileIsRequire" v-if="fileReload">
          <input type="file" @change="handleFileChange">
        </FormItem>
        <FormItem prop="fileH5" label="上传图片H5：" :label-width="120" :required="fileIsRequire" v-if="fileReload">
          <input type="file" @change="handleFileChangeH5">
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelAddPackage" style="margin-right: 10px;" >取消</Button>
        <Button type="primary" @click="addPackage" >确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import http from '@/libs/http';
  import axios from 'axios';
  import PackageSearchForm from './components/packageSearchForm.vue';
  import AllPackage from './components/allPackage.vue';
  import UnPushPackage from './components/unPushPackage.vue';
  import PushPackage from './components/pushPackage.vue';
  import LowerPackage from './components/lowerPackage.vue';
  export default {
    components: {
      PackageSearchForm,
      AllPackage,
      UnPushPackage,
      PushPackage,
      LowerPackage,
    },
    data() {
      const validateDiscountUnitPrice = (rule, value, cb) => {
        if(!value && this.discountUnitPriceRequire){
          cb(new Error('优惠金额不能为0或空'))
        }else if(typeof Number(value) !== 'number') {
          cb(new Error('请输入正确的金额'))
        }else if(this.addData.unitPrice < value){
          cb(new Error('优惠金额不能大于课程单价'))
        }else{
          cb()
        }
      }
      const validateName = (rule, name, cb) => {
        if(!name){
          cb(new Error('套餐名称不能为空'))
        }else{
          let data = { name }
          !this.addOrEdit && (data.id = this.addData.id)
          http.post({
            vm: this,
            url: "/manager/course-package/valid",
            data,
            success: res => {
              res.data && cb() || cb(new Error('套餐名称已存在'))
            }
          })
        }
      }
      return {
        postData: { pageIndex: 1, pageSize: 10 },
        packageList: [],
        total: 0,
        addPackageModal: false,
        addData: { oneToXArr: [], firstList: [], secondList: [], thirdList: [], isDiscount: 0, weekClassHour: 0, weekCount: 0, unitPrice: 0, discountUnitPrice: 0, allPrice: 0, platformType: 2, oneToX:1, discountAllPrice:0},
        // addData: { oneToXArr: [] },
        addRules: {
          firstCode: [
            { required: true, message: '一级分类不能为空', trigger: 'change' }
          ],
          secondCode: [
            { required: true, message: '二级分类不能为空', trigger: 'change' }
          ],
          thirdCode: [
            { required: true, message: '三级分类不能为空', trigger: 'change' }
          ],
          name: [
            { required: true, message: '套餐名称不能为空', trigger: 'blur' },
            { type: 'string', max: 20, message: '套餐名称不能超过20字', trigger: 'blur' },
            { validator: validateName, trigger: 'blur' }
          ],
          // platform: [
          //   { required: true, message: '套餐类型不能为空', trigger: 'change' }
          // ],
          oneToX: [
            { required: true, type: 'number', message: '授课比例不能为空', trigger: 'change' }
          ],
          weekCount: [
            { required: true, type: 'number', min: 1, message: '周数不能为0或空', trigger: 'blur' },
            { required: true, type: 'number', min: 1, message: '周数不能为0或空', trigger: 'change' }
          ],
          weekClassHour: [
            { required: true, type: 'number', min: 1, message: '每周课时数不能为0或空', trigger: 'blur' },
            { required: true, type: 'number', min: 1, message: '每周课时数不能为0或空', trigger: 'change' }
          ],
          unitPrice: [
            { required: true, type: 'number', min: 1, message: '课时单价不能为0或空', trigger: 'blur' },
            { required: true, type: 'number', min: 1, message: '课时单价不能为0或空', trigger: 'change' }
          ],
          allPrice: [
            { required: true, type: 'number', min: 1, message: '套餐总价不能为0或空', trigger: 'blur' },
            { required: true, type: 'number', min: 1, message: '套餐总价不能为0或空', trigger: 'change' }
          ],
          isDiscount: [
            { required: true, type: 'number', trigger: 'change' }
          ],
          discountUnitPrice: [
            { validator: validateDiscountUnitPrice, trigger: 'blur'},
            { validator: validateDiscountUnitPrice, trigger: 'change'},
          ],
          coursePackageDesc: [
            { type: 'string', max: 200, message: '字数不能超过200字', trigger: 'blur' }
          ]
        },
        batchList: [],
        packageUrl: '',
        discountUnitPriceRequire: false,
        uploadIsShow: true,
        addOrEdit: true,
        fileIsRequire: false,
        fileReload: true,
        IsAllPrice: false
      }
    },
    methods: {
      getPackageList(postData = {}, action) {
        this.postData = Object.assign(this.postData, postData)
        http.get({
          vm: this,
          url: '/manager/course-package/list',
          data: this.postData,
          success: res => {
            this.packageList = res.data.list
            this.total = res.data.total
            action && this.$Message.success('查询成功！')
          }
        })
      },
      openAddPackage() {
        this.$refs['addPackage'].resetFields()
        this.addPackageModal = true
        this.uploadIsShow = true
        this.fileIsRequire = true
        this.addData = { oneToXArr: [], firstList: [], secondList: [], thirdList: [], isDiscount: 0, weekClassHour: 0, weekCount: 0, unitPrice: 0, discountUnitPrice: 0, allPrice: 0 }
        this.packageUrl = '/manager/course-package/add'
        this.addOrEdit = true
        this.fileReload = false
        setTimeout(() => {
          this.fileReload = true
        }, 0);
        this.getFirstList()
        this.onAllPriceChange(this.addData.allPrice)
      },
      addPackage() {
        const url = this.packageUrl
        const addOrEdit = this.addOrEdit
        if(this.addData.allPrice===null || this.addData.allPrice==='' )(
          this.addData.allPrice = 0
        )
        if(this.addData.oneToX===null || this.addData.oneToX==='' )(
          this.addData.oneToX = 1
        )
        const { id, name, coursePackageDesc='', firstId, secondId, thirdId, weekClassHour, weekCount, unitPrice, isDiscount, oneToX, discountUnitPrice, version, file, fileH5, allPrice, platformType, discountAllPrice } = this.addData
        this.$refs['addPackage'].validate(valid => {
          if(valid) {
            const addData = { id, name, coursePackageDesc, firstId, secondId, thirdId, weekClassHour, weekCount, unitPrice, isDiscount, oneToX, discountUnitPrice, version, file, fileH5, allPrice, platformType, discountAllPrice }

            if(addOrEdit){
              delete addData.id
              delete addData.version
            }
            const formData = new FormData()
            for(let k in addData){
              formData.append(k, addData[k])
            }
            const msg = addOrEdit ? '添加成功！' : '编辑成功！'
            http._postwithupload({
              vm: this,
              url,
              data: formData,
              success: res => {
                this.$Message.success(msg)
                this.addData = { oneToXArr: [], firstList: [], secondList: [], thirdList: [], isDiscount: 0, weekClassHour: 0, weekCount: 0, unitPrice: 0, discountUnitPrice: 0, allPrice: 0 }
                this.discountUnitPriceRequire = false
                this.addPackageModal = false
                this.$refs['addPackage'].resetFields()
                this.getPackageList()
              }
            })
          }
        })
      },
      cancelAddPackage () {
        this.addPackageModal = false
        this.addData = { oneToXArr: [],firstList: [], secondList: [], thirdList: [], isDiscount: 0, weekClassHour: 0, weekCount: 0, unitPrice: 0, discountUnitPrice: 0, allPrice: 0 }
        this.$refs['addPackage'].resetFields()
        this.packageUrl = ''
      },
      onVisibleChange(status) {
        if(!status) {
          this.cancelAddPackage()
        }
      },
      handleTabs(name) {
        let status = null;
        switch (name) {
          case 'all':
            status = null
            break;
          case 'unpush':
            status = 1
            break;
          case 'push':
            status = 2
            break;
          case 'lower':
            status = 3
            break;
        }
        this.postData.status = status
        this.getPackageList()
      },
      packagePush({ id, version }) {
        this.$Modal.confirm({
          title: '上架',
          content: '确认要上架此套餐吗？',
          loading: true,
          onOk: () => {
            http.post({
              vm: this,
              url: '/manager/course-package/push',
              data: { id, version },
              success: res => {
                this.$Message.success('上架成功！')
                this.getPackageList()
                this.$Modal.remove()
              }
            })
          }
        })
      },
      packageLower({ id, version }) {
        this.$Modal.confirm({
          title: '下架',
          content: '确认要下架此套餐吗？',
          loading: true,
          onOk: () => {
            http.post({
              vm: this,
              url: '/manager/course-package/lower',
              data: { id, version },
              success: res => {
                this.$Message.success('下架成功！')
                this.getPackageList()
                this.$Modal.remove()
              }
            })
          }
        })
      },
      packageEdit(packageData) {
        this.fileIsRequire = false
        this.uploadIsShow = false
        this.fileReload = false
        setTimeout(() => {
          this.fileReload = true
        }, 0);
        this.addOrEdit = false
	      // console.log('%c packageData', 'color:red;', packageData)
        const { id, firstId, secondId, thirdId, oneToX=1, isDiscount=0, weekClassHour=0, weekCount=0, unitPrice=0, discountUnitPrice=0, version, file, fileH5, allPrice=0, platformType } = packageData
        this.discountUnitPriceRequire = isDiscount===1 ? true : false
        this.getFirstList(() => {
          const _firstCode = this.addData.firstList.find(f => f.id === firstId)
          const firstCode = _firstCode && _firstCode.code || ''
          this.addData = Object.assign({}, this.addData, { id, firstCode, firstId, isDiscount, weekClassHour, weekCount, unitPrice, discountUnitPrice, version, file, fileH5, allPrice, platformType })
          this.getSecondList(() => {
            const _secondCode = this.addData.secondList.find(s => s.id === secondId)
            const secondCode = _secondCode && _secondCode.code || ''
            this.addData = Object.assign({}, this.addData, { secondCode, secondId })
            this.getThirdList(() => {
              const _thirdCode = this.addData.thirdList.find(s => s.id === thirdId)
              const thirdCode = _thirdCode && _thirdCode.code || ''
              const oneToXArr = (_thirdCode && _thirdCode.oneToX && _thirdCode.oneToX.split(',') || []).map(i=>parseInt(i))
              this.addData = Object.assign({}, this.addData, { thirdCode, oneToXArr, oneToX, thirdId })
            })
          })
        })

	      this.addData = Object.assign({}, packageData, this.addData)
        this.packageUrl = '/manager/course-package/edit'
        this.addPackageModal = true
        this.onTypeChange(packageData.platformType)
      },
      packageDelete({ id, version }) {
        this.$Modal.confirm({
          title: '删除',
          content: '确认要删除此套餐吗？',
          loading: true,
          onOk: () => {
            http.post({
              vm: this,
              url: '/manager/course-package/delete',
              data: { id, version },
              success: res => {
                this.$Message.success('删除成功！')
                this.getPackageList()
                this.$Modal.remove()
              }
            })
          }
        })
      },
      batchPush() {
        const batchList = this.batchList
        if (batchList.length > 0) {
          this.$Modal.confirm({
            title: '批量上架',
            content: '确认批量上架所选套餐吗？',
            loading: true,
            onOk: () => {
              this.$Modal.remove()
              const batchPushJsonStr = batchList.map(item => ({ id: item.id, version: item.version }))
              http.post({
                vm: this,
                url: '/manager/course-package/batchPush',
                data: { batchPushJsonStr: JSON.stringify(batchPushJsonStr) },
                success: res => {
                  this.$Message.success('批量上架成功！')
                  this.getPackageList();
                }
              })
            }
          })
        } else {
          this.$Message.error('请选择后再进行操作！')
        }
      },
      batchLower() {
        const batchList = this.batchList
        if (batchList.length > 0) {
          this.$Modal.confirm({
            title: '批量下架',
            content: '确认批量下架所选套餐吗？',
            loading: true,
            onOk: () => {
              this.$Modal.remove()
              const batchLowerJsonStr = batchList.map(item => ({ id: item.id, version: item.version }))
              http.post({
                vm: this,
                url: '/manager/course-package/batchLower',
                data: { batchLowerJsonStr: JSON.stringify(batchLowerJsonStr) },
                success: res => {
                  this.$Message.success('批量下架成功！')
                  this.getPackageList();
                }
              })
            }
          })
        } else {
          this.$Message.error('请选择后再进行操作！')
        }
      },
      // 判断套餐类型
      onTypeChange(data) {
        // this.IsAllPrice = data > 0 ? false : true
        if(data===2){
          this.IsAllPrice = true
        }else if(data===3){
          this.IsAllPrice = false
        }
        // this.addData.oneToX = ''
        // this.addData.weekCount = 0
        // this.addData.weekClassHour = 0
        // this.addData.unitPrice = 0
        // this.addData.isDiscount = 0
        // this.addData.discountUnitPrice = 0
      },
      // 判断套餐总价是否有值
      // onAllPriceChange(data) {
      //   this.IsAllPrice = data > 0 ? false : true
      //   // this.addData.oneToX = ''
      //   // this.addData.weekCount = 0
      //   // this.addData.weekClassHour = 0
      //   // this.addData.unitPrice = 0
      //   // this.addData.isDiscount = 0
      //   // this.addData.discountUnitPrice = 0
      // },
      onRadioChange(data) {
        this.discountUnitPriceRequire = data === 1 ? true : false
        if(data === 0){
          this.addData.discountUnitPrice = 0
          this.addData.discountAllPrice = 0
        }
      },
      onSelect(selection) {
        this.batchList = selection
      },
      onSelectAll(selection) {
        this.batchList = selection
      },
      onSelectCancel(selection) {
        this.batchList = selection
      },
      onSelectAllCancel(selection) {
        this.batchList = selection
      },
      handleFileChange(e) {
        this.addData.file = e.target.files[0]
      },
      handleFileChangeH5(e) {
        this.addData.fileH5 = e.target.files[0]
      },
      changePage(pageIndex) {
        this.postData.pageIndex = pageIndex
        this.getPackageList()
      },
      changePageSize(pageSize) {
        this.postData.pageSize = pageSize
        this.getPackageList()
      },
      getFirstList(cb) {
        http.get({
          vm: this,
          url: '/manager/course-classification/getAll',
          data: { type: 1 },
          success: res => {
            this.addData.firstList = res.data
            cb && cb()
          }
        })
      },
      getSecondList(cb) {
        http.get({
          vm: this,
          url: '/manager/course-classification/getAll',
          data: { type: 2, parentCode: this.addData.firstCode },
          success: res => {
            this.addData.secondList = res.data
            cb && cb()
          }
        })
      },
      getThirdList(cb) {
        http.get({
          vm: this,
          url: '/manager/course-classification/getAll',
          data: { type: 3, parentCode: this.addData.secondCode },
          success: res => {
            this.addData.thirdList = res.data
            cb && cb()
          }
        })
      },
      firstChange(val) {
        const _firstId = this.addData.firstList.find(f => f.code === val)
        this.addData.firstId = _firstId && _firstId.id || null
        this.addData.secondCode = null
        this.addData.thirdCode = null
        this.addData.oneToX = null
        if (val) {
          this.getSecondList()
        } else {
          this.addData.secondList = []
          this.addData.thirdList = []
          this.addData.oneToXArr = []
        }
      },
      secondChange(val) {
        const _secondId = this.addData.secondList.find(f => f.code === val)
        this.addData.secondId = _secondId && _secondId.id || null
        this.addData.thirdCode = null
        this.addData.oneToX = null
        if (val) {
          this.getThirdList()
        } else {
          this.addData.thirdList = []
          this.addData.oneToXArr = []
        }
      },
      thirdChange(val) {
        this.addData.oneToX = ''
        if (val) {
          const _thirdId = this.addData.thirdList.find(t => t.code === val)
          const thirdId = _thirdId && _thirdId.id || null
          const oneToXArr = _thirdId && _thirdId.oneToX && _thirdId.oneToX.split(',') || []
          this.addData = Object.assign({}, this.addData, { thirdId, oneToXArr })
        } else {
          this.addData.oneToXArr = []
        }
      }
    },
    mounted() {
      this.getPackageList()
    }
  }
</script>
